<template>
  <view class="search-counter">
    <view class="left-city">
      <text>{{ city.address.area }}</text>
      <image src="../../static/images/down.png" alt="" />
    </view>
    <view class="right-search" v-if="!showFlag" @click="handleSearchPage">
      <view class="text-counter">
        <TextSwiper :options="textOptions" />
      </view>
      <view class="search-btn" v-if="!iconFlag">搜索</view>
      <icon type="search" class="search-icon" size="16" color="#71c383" v-else />
    </view>
    <view class="uni-input-wrapper" v-else>
      <input
        class="uni-input"
        placeholder-class="placeholder_class"
        placeholder="输入关键字搜索"
        @input="handleInput"
        :value="searchInput"
        focus
      />
      <icon type="clear" size="18" @click="handleClear" v-if="showClearIcon" />
      <icon type="search" size="16" color="#71c383" v-else />
    </view>
  </view>
</template>

<script>
import TextSwiper from "../textSwiper/TextSwiper.vue";
import { mapState } from 'vuex';
export default {
  props: {
    showFlag: {
      type: Boolean,
      default: false,
    },
    iconFlag: {
      type: Boolean,
      default: false
    }
  },
  components: {
    TextSwiper,
  },
  data() {
    return {
      textOptions: [
        { id: 1, text: "请输入您需要的服务" },
        { id: 2, text: "柜类维修" },
        { id: 3, text: "空调清洗" },
        { id: 4, text: "300+到家服务" },
        { id: 5, text: "日常保洁" },
        { id: 6, text: "晾衣架安装" },
      ],
      showClearIcon: false,
      searchInput: "",
      locationInfo: {}
    };
  },
  computed: {
    ...mapState(['city'])
  },
  mounted() {
    console.log(this.city,'citycity');
  },
  methods: {
    handleSearchPage() {
      uni.navigateTo({
        url: "/subPage/homePage/search",
      });
    },
    handleInput(e) {
      this.searchInput = e.target.value;
      if (e.target.value.length > 0) {
        this.showClearIcon = true;
      } else {
        this.showClearIcon = false;
      }
      this.$emit('change', this.searchInput)
    },
    // 清除input框
    handleClear() {
      this.searchInput = "";
      this.showClearIcon = false;
      this.$emit('change', this.searchInput);
    },
  },
};
</script>

<style>
.placeholder_class {
  color: #71c383;
}
</style>
<style lang="scss" scoped>
.search-counter {
  padding: 6rpx 6rpx 6rpx 30rpx;
  border-radius: 48rpx;
  border: 2rpx solid #7ebca3;
  display: flex;
  align-items: center;
  gap: 12rpx;
  background: #fafffd;
  .left-city {
    display: flex;
    align-items: center;
    gap: 6rpx;
    font-weight: 500;
    text {
      color: #333a39;
      font-size: 24rpx;
      max-width: 96rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    image {
      width: 24rpx;
      height: 24rpx;
    }
  }
  .right-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    .text-counter {
      flex: 1;
    }
    .search-btn {
      padding: 8rpx 36rpx;
      background: #6fc483;
      font-size: 28rpx;
      color: #fff;
      border-radius: 50rpx;
    }
    .search-icon {
      padding-right: 24rpx;
    }
  }

  .uni-input-wrapper {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex: 1;
    padding: 6rpx 26rpx;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4rpx;
    .uni-input {
      height: 30rpx;
      line-height: 30rpx;
      font-size: 24rpx;
      padding: 0rpx;
      flex: 1;
    }
  }
}
</style>
